<template>
  <div class="work-item" :class="{'work-item-selected': item.show}" v-for="item in props.list" :key="item.id" @click="props.open(item)">
    <a-dropdown :trigger="['contextmenu']" >
      <div>
        <h3 class="work-title" v-show="props.config.isTitle">{{ item.title }}</h3>
        <p class="work-inner" v-show="props.config.isStatus">
          <span class="inner-text">状态:</span>
          <span class="inner-text-small" :style="{backgroundColor: getStatus(item.statusId)?.color}">
            {{ getStatus(item.statusId)?.name }}
          </span>
        </p>
        <p class="work-inner" v-show="props.config.isPriority">
          <span class="inner-text">优先级:</span> 
          <span class="inner-text-small" :style="{backgroundColor: getPriority(item.priority)?.color}">
            {{ getPriority(item.priority)?.name }}
          </span>
        </p>
        <p class="work-inner" v-show="props.config.isCompletedTime"><span class="inner-text">完成时间:</span> {{ item.completedTime }}</p>
        <p class="work-inner" v-show="props.config.isDueDate"><span class="inner-text">截至日期:</span> {{ item.dueDate }}</p>
      </div>
      <template #overlay>
        <a-menu>
          <a-menu-item @click="delHandler(item)"><DeleteOutlined />删除</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script setup lang="ts">
import { DeleteOutlined } from "@ant-design/icons-vue";
interface Props {
  list: any[],
  config: {
    isTitle?: boolean;
    isStatus?: boolean;
    isPriority?: boolean;
    isCompletedTime?: boolean;
    isDueDate?: boolean;
  },
  priorityList: any[];
  statusList: any[];
  open: Function;
  delHandler: Function;
}

const props = withDefaults(defineProps<Props>(), {
  config: {
    isTitle: true,
    isStatus: true,
    isPriority: true,
    isCompletedTime: true,
    isDueDate: true
  } as any
});

// const config = ref(props.config);
// watch(
//   () => props.config,
//   (newVal) => {
//     config.value = newVal;
//   },
//   { deep: true, immediate: true }
// );

const getPriority = (id: number) => {
  const findItem = props.priorityList.find(item => item.id === id);
  if (findItem) {
    return findItem;
  }
};

const getStatus = (id: number) => {
  const findItem = props.statusList.find(item => item.id === id);
  if (findItem) {
    return findItem;
  }
}
</script>

<style scoped lang="less">
.work-item {
  margin: 8px 4px;
  padding: 10px;
  border: 1px solid #e7e9e8;
  border-radius: 4px;
  background-color: #fff;
  cursor: move;
  transition: all 0.2s;
  .work-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .work-inner {
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .inner-text {
      margin-right: 6px;
      color: #8f9492;
    }
    .inner-text-small {
      display: inline-block;
      padding: 4px 6px;
      border-radius: 4px;
      box-sizing: border-box;
    }
  }
}
.work-item:hover {
  transform: scale(1.03);
  border-color: #569cfd;
}

.work-item-selected {
  background-color: rgba(230, 162,  60, 0.2);
  border-color: #e6a23c !important;
  // transform: scale(1.03);
  animation: blink 0.9s infinite;
}

@keyframes blink {
  0%, 100% {
    background-color: rgba(230, 162,  60, 0.3);
  }
  50% {
    background-color: rgba(230, 162,  60, 0.1);
  }
}
</style>
